<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script></head>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
</head>
<body>

    <header class="header header-f" style="padding-top:2rem; height:4rem;">
        <div class="header-l aui-pull-left" onclick="closeWin()">
            <i class="fa fa-angle-left"></i>
        </div>
        <div class="header-title">
            我的订单
        </div>
        <div class="header-r aui-pull-right">
        </div>
    </header>
    <div style="height:4rem;"></div>

    <ul class="order-nav">
        <li onclick="changeChooseState('all');" id="all">全部</li>
        <li onclick="changeChooseState('waitPay');" id="waitPay">待付款</li>
        <li onclick="changeChooseState('waitSend');" id="waitSend">待发货</li>
        <li onclick="changeChooseState('waitReceive');" id="waitReceive">待收货</li>
        <li onclick="changeChooseState('waitComment');" id="waitComment">待评价</li>
    </ul>
    <div id="list">
<!--     <div class="order-item">
        <div class="order-item-t" tapmode onclick="orderdetails()">
            订单号：SH201811154411546576
            <span>
                待付款
                <i class="fa fa-angle-right"></i>
            </span>
        </div>
        <div class="order-item-m">
            <img src="./images/goods-3.jpg">
            <dl>
                <dt>智能锁指纹智能锁</dt>
                <dd>
                    ￥2650.00
                    <span>x1</span>
                </dd>
            </dl>
        </div>
        <div class="order-item-d">
            共1个商品 合计：￥2650.00
        </div>
        <div class="order-item-d">
            <div class="order-item-btn">取消订单</div>
            <div class="order-item-btn active">付款</div>
        </div>
    </div> -->
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/template" id="template">
    {{~it:value:index}}
    <div class="order-item">
        <div class="order-item-t" tapmode onclick="orderdetails()">
            订单号：{{=value.order_no}}
            <span>
                {{=value.status_data.name}}
                <i class="fa fa-angle-right"></i>
            </span>
        </div>
        {{~value.order_items:valuee:indexx}}
        <div class="order-item-m" onclick="goodsDetails({{=valuee.id}});">
            <img src="{{=valuee.goods_image}}">
            <dl>
                <dt>{{=valuee.goods_name}}</dt>
                <dd>
                    ￥{{=valuee.goods_price}}
                    <span>x{{=valuee.goods_qty}}</span>
                </dd>
            </dl>
        </div>
        {{~}}
        <div class="order-item-d">
            共{{=value.order_sum}}个商品 合计：￥{{=value.total_price}}
        </div>
        <div class="order-item-d">
            {{? value.status_data.action == 'pay'}}<div class="order-item-btn active">立即付款</div>
            {{?? value.status_data.action == 'parcel'}}<div class="order-item-btn active" onclick="cancelOrder({{=value.order_no}});">取消订单</div>
            {{?? value.status_data.action == 'comment'}}<div class="order-item-btn active" onclick="evaluateOrder({{=value.order_no}});">待评价</div>
            {{?? value.status_data.action == 'receive'}}<div class="order-item-btn active" onclick="receive({{=value.order_no}});">确认收货</div>
            {{?}}
        </div>
    </div>
    {{~}}
</script>
<script type="text/javascript">

    apiready = function(e){

        var type = api.pageParam.type;

        if (type == 'all') {
            globalType = 0;
        }else if(type == 'waitPay'){
            globalType = 1;
        }else if(type == 'waitSend'){
            globalType = 2;
        }else if(type == 'waitReceive'){
            globalType = 3;
        }else{
            globalType = 4;
        }
        
        changeChooseState(type);
        // loadData(type);
    }

    // 加载数据
    function loadData(type){
        var userid = $api.getStorage('userid');
        var authtoken = $api.getStorage('authtoken');
        api.ajax({
            url: webAddress + '/a/order/Order/index',
            method: 'get',
            data: {
                values: {
                    limit: limit,
                    type: type,
                },
            },
            headers: {
                TOKEN: token,
                authuid: userid,
                authtoken: authtoken,
            },
        },function(ret, err){
            if (ret) {
                // alert( JSON.stringify( ret ) );
                templateFun(ret.result.data);
            } else {

                api.toast({
                    msg: err.body.message,
                    duration: 2000,
                    location: 'bottom'
                });
                templateFun();
                return false;
            }
        });
    }

    // 取消订单
    function cancelOrder(orderno){
        api.confirm({
            title: '提示！',
            msg: '确定要取消订单嘛？',
            buttons: ['确定', '取消']
        }, function(ret, err){
            if( ret ){
             if (ret.buttonIndex == 1) {
                var userid = $api.getStorage('userid');
                var authtoken = $api.getStorage('authtoken');
                api.ajax({
                    url: webAddress + '/a/order/Order/cancel',
                    method: 'post',
                    data: {
                        values: {
                            order_no: orderno,
                        },
                    },
                    headers: {
                        TOKEN: token,
                        authuid: userid,
                        authtoken: authtoken,
                    },
                },function(ret, err){
                    if (ret) {
                        // alert( JSON.stringify( ret ) );
                        // alert(globalType);
                        loadData(globalType);
                        api.toast({
                            msg: ret.body.message,
                            duration: 2000,
                            location: 'bottom'
                        });
                        // templateFun(ret.result.data);
                    } else {
                        alert( JSON.stringify( err ) );
                        api.toast({
                            msg: err.body.message,
                            duration: 2000,
                            location: 'bottom'
                        });
                        return false;
                    }
                });
            }
        }else{
        }
    });

    }

    // 确认收货
    function receive(orderid){
        api.confirm({
            title: '提示！',
            msg: '确定要收货嘛？',
            buttons: ['确定', '取消']
        }, function(ret, err){
            if( ret ){
                if (ret.buttonIndex == 1) {
                    // 确定按钮
                    var userid = $api.getStorage('userid');
                    var authtoken = $api.getStorage('authtoken');
                    api.ajax({
                        url: webAddress + '/a/order/Order/confirm',
                        method: 'post',
                        data: {
                            values: {
                                order_no: orderid,
                            },
                        },
                        headers: {
                            TOKEN: token,
                            authuid: userid,
                            authtoken: authtoken,
                            'Content-Type': 'application/json',
                        },
                    },function(ret, err){
                        if (ret) {
                            // alert( JSON.stringify( ret ) );
                            api.toast({
                                msg: ret.body.message,
                                duration: 2000,
                                location: 'bottom'
                            });
                            loadData(globalType);
                            // templateFun(ret.result.data);
                        } else {
                            alert( JSON.stringify( err ) );
                            api.toast({
                                msg: err.body.message,
                                duration: 2000,
                                location: 'bottom'
                            });
                            return false;
                        }
                    });
                }
            }else{
                return false;
            }
        });

    }

    // 查看商品详情
    function goodsDetails(goodsid){
        var delay = 0;
        if(api.systemType != 'ios'){
            delay = 300;
        }
        api.openWin({
            name: 'goodsdeatils',
            url: './goods_details.html',
            bounces:false,
            delay: delay,
            slidBackEnabled:true,
            vScrollBarEnabled:false,
            progress:{
                type:"page"
            },
            pageParam:{
                id: goodsid,
            }
        });
    }

    // 模板赋值函数
    function templateFun(data){
        if (data) {
          var template = $api.byId('template');
          var dotFn = doT.template(template.innerHTML);
          var html = dotFn(data);
          var list = $api.byId('list');
          $api.html(list, html);
      }else{

          var list = $api.byId('list');
          var html = '<h2 style="padding:1rem; text-align:center; color:#999; font-size:1rem;">暂无内容</h2>';
          list.innerHTML = html;
      }
  }

  function orderdetails(){
    var delay = 0;
    if(api.systemType != 'ios'){
        delay = 300;
    }
    api.openWin({
        name: 'orderdetails',
        url: './order-details.html',
        bounces:false,
        delay: delay,
        slidBackEnabled:true,
        vScrollBarEnabled:false,
        progress:{
            type:"page"
        }
    });
}

    // 待评价
    function evaluateOrder(order_no){
        var delay = 0;
        if(api.systemType != 'ios'){
            delay = 300;
        }
        api.openWin({
            name: 'order_details',
            url: './order_details.html',
            bounces:false,
            delay: delay,
            slidBackEnabled:true,
            vScrollBarEnabled:false,
            progress:{
                type:"page"
            },
            pageParam:{
                id: order_no,
            }
        });
    }

    // 改变选中状态
    function changeChooseState(type){

        $('li').removeClass('active');
        $('#'+type).addClass('active');

        if (type == 'all') {
            globalType = 0;
        }else if(type == 'waitPay'){
            globalType = 1;
        }else if(type == 'waitSend'){
            globalType = 2;
        }else if(type == 'waitReceive'){
            globalType = 3;
        }else{
            globalType = 4;
        }
        loadData(globalType);
    }


    function closeWin(){
        api.closeWin({
        });
    }
</script>
</html>
